<template>
  <view>
    <baseHead title="实名认证" :showReturn="true" :right="false"></baseHead>
    <view class="alert">
      <view class="renzhengcg" v-if="status === 1">
        <view class="alert-box">
          <image class="image" src="/static/image/jibenshezhi/rzcg.png"></image>
          <view class="alert-text">认证成功</view>
          <view class="alert-time">{{
            form.CheckTime !== null ? form.CheckTime : form.CreatedTime
          }}</view>
        </view>
        <view class="alert-content">
          <view class="alert-con-box">
            <view class="con-title">真实姓名</view>
            <view class="con-name">{{ form.SureName }}</view>
          </view>
          <view class="alert-con-box">
            <view class="con-title">证件类型</view>
            <view class="con-name">身份证</view>
          </view>
          <view class="alert-con-box">
            <view class="con-title">证件证号</view>
            <view class="con-name">{{ form.CardNumber }}</view>
          </view>
          <view class="alert-con-box">
            <view class="con-title">证件有效期</view>
            <view class="con-name">
              {{ form.CardValidStartDate | formatDateYM }}-{{
                form.CardValidEndDate | formatDateYM
              }}
            </view>
          </view>
        </view>
      </view>

      <view class="alert-content1" v-else-if="status === 2">
        <view class="alert-box1">
          <image class="image" src="/static/image/jibenshezhi/rzsb.png"></image>
          <view class="alert-text">认证失败</view>
          <view class="alert-time">{{
            form.CheckTime !== null ? form.CheckTime : form.CreatedTime
          }}</view>
          <view class="alert-yuanyin">失败原因：{{ form.CheckReason }}</view>
        </view>
        <view class="btn">
          <view class="btntext" @click="chongxinrenzheng"> 重新认证 </view>
        </view>
      </view>

      <view class="alert-content1" v-else>
        <view class="alert-box1">
          <image class="image" src="/static/image/jibenshezhi/shz.png"></image>
          <view class="alert-text">审核中</view>
          <view class="alert-time">{{
            form.CheckTime !== null ? form.CheckTime : form.CreatedTime
          }}</view>
        </view>
        <view class="btn" @click="fanhui"> 返回 </view>
      </view>
    </view>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
export default {
  data() {
    return {
      form: {},
      status: null,
    };
  },
  components: {
    baseHead,
  },
  onLoad(option) {
    if (option) {
      this.status = Number(option.status);
    }
  },
  onShow() {
    this.cxrzxx();
  },
  methods: {
    cxrzxx() {
      this.$http.core.accountgetAudit().then((res) => {
        if (res.Success) {
          this.form = res.Result;
        }
      });
    },
    // 返回
    fanhui() {
      uni.navigateBack({ delta: 1 });
    },
    // 重新认证
    chongxinrenzheng() {
      uni.redirectTo({
        url: "/pages/views/packageB/type-jobhunting/jibenshezhi/jibenziliao/shimingrenzheng",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.alert {
  .renzhengcg {
    .alert-box {
      text-align: center;
      padding: 48rpx 0 39rpx;
      background-color: #fff;

      .image {
        width: 202rpx;
        height: 202rpx;
      }

      .alert-text {
        font-size: 30rpx;
        font-weight: 400;
        color: #000000;
      }

      .alert-time {
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        padding: 7rpx 0;
      }
    }

    .alert-content {
      .alert-con-box {
        display: flex;
        justify-content: space-between;
        padding: 39rpx 30rpx;
        background-color: #fff;
        // border-bottom: 1rpx solid #999;
        margin-bottom: 1rpx;

        .con-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #000000;
        }

        .con-name {
          font-size: 30rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }

  .alert-content1 {
    background-color: #fff;
    // height: calc((100vh -200rpx)- var(--status-bar-height));
    height: calc(100vh - 90rpx - var(--status-bar-height));
    .alert-box1 {
      padding: 39rpx 30rpx;
      text-align: center;

      .image {
        width: 202rpx;
        height: 202rpx;
      }

      .alert-text {
        font-size: 30rpx;
        font-weight: 400;
        color: #000000;
      }

      .alert-time {
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        padding: 7rpx 0;
      }
      .alert-yuanyin {
        padding-top: 47rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }
    }

    .btn {
      margin: 142rpx 230rpx;
      background: #3476fe;
      border-radius: 49rpx;
      opacity: 1;
      padding: 23rpx 85rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>